export default {
  visibleRender: (el, binding) => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          // 当元素进入视窗时
          if (binding.value) {
            binding.value('enter')
          }
          if (binding.arg && binding.arg === 'enter') {
            observer.unobserve(el) // 停止观察
          }
        } else {
          if (binding.value) {
            binding.value('leave')
          }
          if (binding.arg && binding.arg === 'leave') {
            observer.unobserve(el) // 停止观察
          }
        }
      },
      {
        rootMargin: '50px',
        threshold: 0.1
      }
    )

    observer.observe(el) // 开始观察元素
  },
  resizeObserver: (el, binding) => {
    const observer = new ResizeObserver((entries) => {
      binding.value(entries[0].target.clientHeight)
    })

    observer.observe(el)
  }
}
